<template>
  <div id="withdrawAUD">
    <NavBar title="提币" left-arrow @click-left="onClickLeft" />
    <div class="withdrawAUD-box">
      <Form @submit="onSubmit">
        <Field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入户名"
        />
        <Field
          v-model="cardnumber"
          name="银行卡号"
          label="银行卡号"
          placeholder="请输入银行卡号"
        />
        <Field
          v-model="bankname"
          name="银行名称"
          label="银行名称"
          placeholder="请输入银行名称"
        />
        <Field
          v-model="Account"
          name="Account IFSC"
          label="Account IFSC"
          placeholder="请输入Account IFSC"
        />

        <div class="withdrawAUD-body">
          <div class="body-title">提现的金额</div>
          <Field
            v-model="withdraw"
            name="提现金额"
            placeholder="请输入提现的金额"
          />
          <div class="usable">可用：0 AUD</div>

          <div class="body-neck">提现密码</div>
          <Field
            v-model="password"
            name="提现密码"
            placeholder="请输入提现密码"
          />

          <div class="body-procedure">手续费</div>
          <Field
            name="手续费"
            placeholder="手续费 1%"
            :readonly="true"
          />
        </div>

        <div class="predict">预计到账数量： 0.0000AUD</div>

        <div style="margin: 16px">
          <Button round block type="info" native-type="submit">提交</Button>
        </div>
      </Form>
    </div>
  </div>
</template>
<script>
import { NavBar, Field, Form, Button } from "vant";
export default {
  components: {
    NavBar,
    Form,
    Field,
    Button,
  },
  data() {
    return {
      username: "", // 户名
      cardnumber: "", // 银行卡号
      bankname: "", // 银行名称
      Account: "", // Account IFSC
      withdraw: "", // 提现的金额
      password: "", // 提现密码
    };
  },
  created() {},
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },

    // 提交
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>
<style lang="less" scoped>
#withdrawAUD {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .withdrawAUD-box {
    background-color: #fff;
    padding-bottom: 10px;
    .withdrawAUD-body {
      .body-title {
        padding: 0 15px;
        margin-top: 10px;
      }
      /deep/.van-field__control {
        background-color: #f7f6fb;
        border-radius: 10px;
        height: 40px;
        padding-left: 10px;
        border-bottom: none;
      }
      /deep/.van-cell::after {
        border-bottom: none;
      }
      .usable {
        margin-left: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid #f7f6fb;
      }
      .body-neck {
        padding: 0 15px;
        margin-top: 10px;
      }
      .body-procedure {
        padding: 0 15px;
        margin-top: 10px;
      }
    }
    .predict {
      font-size: 16px;
      color: #007aff;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>